<template>
  <div class="divStyle">
    <div class="content">
      <el-input type="text" v-model="txt" />
    </div>
    <div class="btn">
      <el-button @click="btn" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import "@antv/x6-vue-shape";
import { mockRelationData } from "../../data/mock";
export default {
  name: "other",
  inject: ["getNode", "getGraph"],
  data() {
    return {
      txt: "",
    };
  },
  props: {
    pnode: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    btn() {
      const graph = this.getGraph();
      mockRelationData.push({
        relationId: this.pnode.id,
        sourceEntityId: this.pnode.source.cell,
        targetEntityId: this.pnode.target.cell,
        label: this.txt,
      });
      graph.addEdge({
        source: this.pnode.source.cell,
        target: this.pnode.target.cell,
        label: this.txt,
        attrs: {
          line: {
            stroke: "#B4BDCF",
            strokeWidth: 1,
          },
        },
      });
      this.getNode().remove();
    },
  },
};
</script>
<style scoped lang="less">
.divStyle {
  height: 500px;
  width: 500px;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  background-color: #fff;
  position: relative;
}
.content {
  padding: 20px;
}
.btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>
